<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>上机考试系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--<s:if test="#application.exam==null">-->
    <!--	<meta http-equiv="refresh" content="60">-->
    <!--</s:if>-->
    <!-- Le styles -->
    <link th:href="@{/static/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/static/css/exam.css}" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/toastr.js/1.3.1/css/toastr.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 60px;
            /* 60px to make the container go all the way to the bottom of the topbar */
        }
    </style>
    <link th:href="@{/static/css/bootstrap-responsive.css}" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>
<div class="container">
    <ul id="loginTab" class="nav nav-tabs">
        <li class="active"><a href="#student" data-toggle="tab">学生登录</a>
        </li>
        <li><a href="#teacher" data-toggle="tab">教师登录</a></li>
        <li><a href="#admin" data-toggle="tab">管理员登录</a></li>
    </ul>

    <div id="loginTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="teacher">
            <div class="container">
                <div class="row vertical-center">
                    <div class="exam-login">
                        <h3>
                            <img class="img-circle" th:src="@{/static/img/exam-teacher.png}" />
                            教师登录
                        </h3>

                        <div class="exam-form">
                            <p>
                                <input type="text" id="teacherName" name="name" placeholder="用户名" /> <br />
                                <input type="password" id="teacherPass" name="pass" placeholder="口令" />
                            </p>
                            <p>
                                <button id="teacherLogin" class="btn btn-primary"
                                       style="width: 100%" >登录</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade in active" id="admin">
            <div class="container">
                <div class="row vertical-center">
                    <div class="exam-login">
                        <h3>
                            <img class="img-circle" th:src="@{/static/img/exam-admin.png}" />
                            管理员登录
                        </h3>

                        <div class="exam-form">
                            <p>
                                <input type="text" id="adminName" name="tName" placeholder="用户名" /><br/>
                                <input id="adminPass" type="password"  name="tPass" placeholder="口令" />
                            </p>
                            <p>
                                <button id="adminLogin" class="btn btn-primary"
                                       style="width: 100%" >登录</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade in active" id="student">
            <div class="container">
                <div class="exam-info">
                    <h4 th:if="${application.exam == null}">当前没有进行中的考试，不能登录。</h4>
                    <h4 th:if="${application.exam != null}"><strong th:text="${application.exam.name}"></strong>正在进行中，请输入学号和姓名登录。</h4>
                </div>

<!--                <s:actionerror/>-->
                <div class="row vertical-center">
                    <div class="exam-login">
                        <h3>
                            <img class="img-circle" th:src="@{/static/img/exam-student.png}" />
                            学生登录
                        </h3>

                        <div class="exam-form">
                            <p>
                                <input type="text" id="sno" name="sno" placeholder="学号" />
                                <br />
                                <input type="text" id="sname" name="sname" placeholder="姓名" />
                            </p>
                            <p>
                                <button th:if="${application.exam != null}" id="studentLogin" class="btn btn-primary"
                                           style="width: 100%" >登录</button>
                                <button th:if="${application.exam == null}" type="submit" class="btn disabled" onclick="return false" value="登录"
                                           style="width: 100%" >登录</button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /container -->
<!-- Placed at the end of the document so the pages load faster -->
<SCRIPT th:src="@{static/js/jquery.min.js}"></SCRIPT>
<SCRIPT src="static/js/bootstrap.min.js"></SCRIPT>
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script type="text/javascript">

    $('#adminLogin').on('click', function (){
        var name = $('#adminName').val()
        var pass = $('#adminPass').val()
        if (!name){
            toastr.error("用户名不能为空");
            return false;
        }
        if (!pass){
            toastr.error("密码不能为空");
            return false;
        }
        axios.post("/admin_login", {
            'name': name,
            'password': md5(pass)
        }).then(res=>{
            // console.log(res)
            if (!res.data.success){
                toastr.error(res.data.msg)
            }else{
                location.href = '/admin'
            }
        })
    })

    $('#teacherLogin').on('click', function (){
        var name = $('#teacherName').val()
        var pass = $('#teacherPass').val()
        if (!name){
            toastr.error("用户名不能为空");
            return false;
        }
        if (!pass){
            toastr.error("密码不能为空");
            return false;
        }
        axios.post("/teacher_login", {
            'name': name,
            'password': md5(pass)
        }).then(res=>{
             // console.log(res)
            if (!res.data.success){
                toastr.error(res.data.msg)
            }else{
                location.href = '/teacher'
            }
        })
    })

    $('#studentLogin').on('click', function (){
        var number = $('#sno').val()
        var name = $('#sname').val()
        if (!number){
            toastr.error("学号不能为空");
            return false;
        }
        if (!name){
            toastr.error("名字不能为空");
            return false;
        }
        axios.post("/student_login", {
            'number': number,
            'name': name
        }).then(res=>{
            // console.log(res)
            if (!res.data.success){
                toastr.error(res.data.msg)
            }else{
                location.href = '/student'
            }
        })
    })

</script>
</body>
</html>